Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Отображение прогрессбара загрузки файла на сервер (DiS, оценка: 3)
Author Message
DiS
Участник форума



Joined: 17 Feb 2006
Posts: 49
Карма: 1
   поощрить/наказать

Location: Санкт-Петербург

PostPosted: Thu Mar 29, 2007 11:49 am (написано за 3 минуты 23 секунды)
   Post subject: Отображение прогрессбара загрузки файла на сервер
Reply with quote

Как сделать отображение прогресса загрузки файла на сервер в контесксте использования библиотеки JsHttpRequest? Иногда юзеры грузят реально большие файлы и просто анимированная гифка в качестве "отвода глаз" не помогает... На Rapidshare как-то это сделали...

Я подозреваю, что можно как-то из яваскрипта контролировать количество отправленных данных, потому что ждать от РНР отчетов об этом не полуится точно, он только о конечном результате в состоянии сообщить...
Back to top
View user's profile Send private message Send e-mail
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 29, 2007 11:43 pm (спустя 11 часов 53 минуты; написано за 1 минуту 3 секунды)
   Post subject:
Reply with quote

Вопрос имеет весьма малое отношение к JsHttpRequest.

www.google.ru/search?q=php+upload+progress&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ru:official&client=firefox-a

На самом деле, в PHP не существует надежных средств для отслеживания закачки, т.к. нельзя гарантированно сказать, какой из закачиваемых файлов каким скриптом закачивается.
Back to top
View user's profile Send private message Send e-mail
DiS
Участник форума



Joined: 17 Feb 2006
Posts: 49
Карма: 1
   поощрить/наказать

Location: Санкт-Петербург

PostPosted: Fri Mar 30, 2007 11:43 am (спустя 11 часов 59 минут; написано за 4 минуты 21 секунду)
   Post subject:
Reply with quote

Ну про невозможность получить отчет от РНР скрипта, который обрабатывает закачку, я вобщем-то знал...

Я предполагал, что есть возможность в рамках пользовательской машины мониторить прогресс - ведь скорость от юзера практически всегда ниже чем скорость приема сервером, поэтому можно просто смотреть сколько юзер отправил, а не сколько сервер принял...

Соответственно вопрос можно развернуть другим боком: может ли механизм закачки через AJAX отчитываться о количестве переданных байт? (что-то мне подсказывает, что не сможет, но всеже :))

P.S. В тех примерах, что нашел гугль все дружно делают через временные файлы РНР, мониторя их состояние - хороший способ, но вы правы насчет "нельзя гарантированно сказать, какой из закачиваемых файлов каким скриптом закачивается"
Back to top
View user's profile Send private message Send e-mail
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Mon Apr 02, 2007 12:30 pm (спустя 3 дня 47 минут; написано за 1 минуту 15 секунд)
   Post subject:
Reply with quote

DiS wrote:
может ли механизм закачки через AJAX отчитываться о количестве переданных байт?
Нет. С клиента вообще ничего узнать нельзя (если только не делать аплоад файлов полностью на Flash, но для этого нужно, во-первых, писать на Flash, и во-вторых, чтобы у пользователя он был установлен).
Back to top
View user's profile Send private message Send e-mail
DiS
Участник форума



Joined: 17 Feb 2006
Posts: 49
Карма: 1
   поощрить/наказать

Location: Санкт-Петербург

PostPosted: Mon Apr 02, 2007 1:48 pm (спустя 1 час 18 минут; написано за 15 секунд)
   Post subject:
Reply with quote

спасибо.
Back to top
View user's profile Send private message Send e-mail
Kolka
Участник форума
Warnings: 1


Joined: 05 Jan 2004
Posts: 29
Карма: -5
   поощрить/наказать


PostPosted: Mon Apr 02, 2007 4:15 pm (спустя 2 часа 26 минут; написано за 1 минуту 3 секунды)
   Post subject:
Reply with quote

Как вариант
1. An Ajax file uploads progress bar. AJAX powered progressbar to monitor file uploads with (Cake)PHP.
thinkingphp.org/demos/cake-timer/

2. SWFUpload. Upload files via flash to get the flash-upload dialog goodness.
swfupload.mammon.se/
Back to top
View user's profile Send private message Send e-mail
SATURN_NEO
Участник форума



Joined: 21 May 2006
Posts: 60
Карма: 2
   поощрить/наказать


PostPosted: Fri Apr 20, 2007 3:53 pm (спустя 17 дней 23 часа 38 минут; написано за 1 минуту 3 секунды)
   Post subject:
Reply with quote

Есть механизм, с помощью которого можно узнать объем передаваемых данных. То есть, для получения длины ответа вызовите request.getResponseHeader("Content-Length");. Для получения типа содержимого используйте request.getResponseHeader("Content-Type");. Подробнее сдесь www-128.ibm.com/developerworks/ru/library/wa-ajaxintro3/
Back to top
View user's profile Send private message Send e-mail
dimka|ne_zvezda
Заглянувший



Joined: 06 Aug 2007
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Mon Aug 06, 2007 6:21 pm (спустя 3 месяца 16 дней 2 часа 27 минут; написано за 2 минуты 9 секунд)
   Post subject:
Reply with quote

Для php 5.2 есть расширение PECL pecl.php.net/package/uploadprogress для получения инфы о загрузке файла - но с JSHttpRequest не работает, так как наверное при загрузке файла на сервер не передается обязательный hidden input <input type=”hidden” name=”UPLOAD_IDENTIFIER” value=”some_uniq_id” />. Кто*нить знает как его передать через JsHTTPRequest?
Back to top
View user's profile Send private message
overall
Заглянувший



Joined: 05 Aug 2007
Posts: 5
Карма: 0
   поощрить/наказать


PostPosted: Tue Aug 07, 2007 9:19 pm (спустя 1 день 2 часа 57 минут; написано за 2 минуты 26 секунд)
   Post subject:
Reply with quote

Ну дык может попробовать передать через JsHttpRequest, как один из передаваемых параметров?
Code (php): скопировать код в буфер обмена
  JsHttpRequest.query
  (
    ' ... .php',
    {
      'UPLOAD_IDENTIFIER': some_uniq_id
      //...
    },
    function(result, errors)
    {
      //...
    },
    false
  );
Если будете пробовать сообщите потом о результатах, пожалуйста.
Back to top
View user's profile Send private message
bietchetlien
Заглянувший



Joined: 08 Aug 2007
Posts: 11
Карма: 0
   поощрить/наказать


PostPosted: Sun Aug 12, 2007 1:05 am (спустя 4 дня 3 часа 46 минут; написано за 34 секунды)
   Post subject:
Reply with quote

I used APC extension.

What's new in PHP V5.2, Part 5: Tracking file upload www-128.ibm.com/developerworks/opensource/library/os-php-v525/
Back to top
View user's profile Send private message
djArf
Guest





Карма: 388
   поощрить/наказать


PostPosted: Mon Sep 10, 2007 8:15 am (спустя 29 дней 7 часов 9 минут; написано за 1 минуту 28 секунд)
   Post subject:
Reply with quote

Не совсем по теме, хотя перекликается с ней. Как во время отправки данных (или файла) показать не прогрессбар, а всего-навсего текстовое сообщение (типа, "Выполняется отправка данных")?
Спасибо.
Back to top
djArf
Guest





Карма: 388
   поощрить/наказать


PostPosted: Mon Sep 10, 2007 9:26 am (спустя 1 час 11 минут; написано за 2 минуты)
   Post subject:
Reply with quote

djArf wrote:
Не совсем по теме, хотя перекликается с ней. Как во время отправки данных (или файла) показать не прогрессбар, а всего-навсего текстовое сообщение (типа, "Выполняется отправка данных")?
Спасибо.
Что-то я туплю не по-детски..... :)
Back to top
DiS
Участник форума



Joined: 17 Feb 2006
Posts: 49
Карма: 1
   поощрить/наказать

Location: Санкт-Петербург

PostPosted: Sun Nov 04, 2007 1:41 pm (спустя 1 месяц 24 дня 4 часа 15 минут; написано за 5 минут 33 секунды)
   Post subject:
Reply with quote

При вызове функции отправки (обработки) прописывай показ элемента, внутри callback функции прописывай скрытие, делов-то ;)

По теме: не люблю я сторонние библиотеки ;) JSHTTPRequest освоил только из глубокого уважения к автору :)

Мне на ум пока приходит только в момент вызова основной функции вызывать еще одну, которая по интервалу, допустим в 5 секунд, будет долбиться на сервер и получать размер последнего tmp файла... В моем случае это вполне жизнеспособно, т.к. скрипт пишется для административной панели и _одновременная_ загрузка файлов крайне маловероятна (так уж повелось, что несмотря на механизмы мультиюзерности, связанные с закрытием доступа к редактируемым сущностям и т.д., наши клиенты все равно ходят туда по-одному).

P.S. Pecl конечно хорошо, но где гарантии, что это расширение стоит у хостера
P.P.S. Пожалуй самый не-шаманский всеже flash...
Back to top
View user's profile Send private message Send e-mail
OlegD
Guest





Карма: 388
   поощрить/наказать


PostPosted: Thu Jan 17, 2008 2:32 pm (спустя 2 месяца 13 дней 50 минут; написано за 1 минуту 18 секунд)
   Post subject:
Reply with quote

www.bram.us/projects/js_bramus/jsprogressbarhandler/ - реализация индикатора загрузки при помощи prototype.js. Судя по примерам на сайте разработчиков - довольно успешная, хотя в Опере не всегда срабатывает адекватно.
Back to top
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 198
   поощрить/наказать

Location: 007 495

PostPosted: Thu Jan 17, 2008 6:05 pm (спустя 3 часа 33 минуты; написано за 1 минуту 4 секунды)
   Post subject:
Reply with quote

OlegD
Попробуйте в демке www.bram.us/demo/projects/jsprogressbarhandler/ -- сбросить первый прогрессбар до нуля, потом нажать на кнопку Fill 100%, и быстро, пока она ещё не доползла до конца, снова нажать Empty Bar :). Забавно, не правда ли?
Back to top
View user's profile Send private message Send e-mail
DiS
Участник форума



Joined: 17 Feb 2006
Posts: 49
Карма: 1
   поощрить/наказать

Location: Санкт-Петербург

PostPosted: Thu Jan 17, 2008 8:25 pm (спустя 2 часа 20 минут; написано за 50 секунд)
   Post subject:
Reply with quote

Ха, кто-то забыл сбросить setInterval или setTimeout в зависимости от того чем таймаут делается )))
Back to top
View user's profile Send private message Send e-mail
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 198
   поощрить/наказать

Location: 007 495

PostPosted: Thu Jan 17, 2008 9:57 pm (спустя 1 час 32 минуты; написано за 24 секунды)
   Post subject:
Reply with quote

DiS
Уверяю Вас, что даже из-за одного этого бага я бы уже не стал рекомендовать эту библиотеку к использованию.
Back to top
View user's profile Send private message Send e-mail
DiS
Участник форума



Joined: 17 Feb 2006
Posts: 49
Карма: 1
   поощрить/наказать

Location: Санкт-Петербург

PostPosted: Thu Jan 17, 2008 11:03 pm (спустя 1 час 5 минут; написано за 53 секунды)
   Post subject:
Reply with quote

Юрий Насретдинов
Согласен с Вами...

По теме:

Единственный нормальный способ - через Flash. Лично я пользуюсь www.swfupload.org/ ООООЧЕНЬ удобная либа, генерит кучу событий, отчитывается о каждом своем действии да и вообще работает классно.
Back to top
View user's profile Send private message Send e-mail
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 198
   поощрить/наказать

Location: 007 495

PostPosted: Thu Jan 17, 2008 11:37 pm (спустя 34 минуты; написано за 1 минуту 14 секунд)
   Post subject:
Reply with quote

DiS
Да, SWFUpload на меня тоже произвёл впечатление... У него есть лишь один недостаток (правда, он не связан с конкретно SWFUpload, а скорее просто со всеми роликами на Flash) -- он не может делать upload файлов «по частям», как умеют коммерческие Java-апплеты.
Back to top
View user's profile Send private message Send e-mail
AlexGr
Guest





Карма: 388
   поощрить/наказать


PostPosted: Sun Mar 23, 2008 2:22 am (спустя 2 месяца 5 дней 2 часа 44 минуты; написано за 9 минут 31 секунду)
   Post subject:
Reply with quote

dimka|ne_zvezda wrote:
Для php 5.2 есть расширение PECL pecl.php.net/package/uploadprogress для получения инфы о загрузке файла - но с JSHttpRequest не работает, так как наверное при загрузке файла на сервер не передается обязательный hidden input <input type=”hidden” name=”UPLOAD_IDENTIFIER” value=”some_uniq_id” />. Кто*нить знает как его передать через JsHTTPRequest?
{
 UPLOAD_IDENTIFIER: some_uniq_id,
 val:value
}

К сожалению этот вариант не работает.

Дело в том, что <INPUT TYPE='hidden' name='UPLOAD_IDENTIFIER' value='some_uniq_id'> должен стоять в форме перед тэгом <INPUT TYPE='file' name='_file'>, иначе uploadprogress не работает. Такое ощущение, что $_POST['UPLOAD_IDENTIFIER'] приходит позже, чем нужно.

Почему же в реальности JSHttpRequest не работает с uploadprogress, лучше спросить уважаемого Дмитрия. Хотя он и не обязан, чтобы это работало вместе, было бы очень хорошо, чтобы работало.
Back to top
Guest






Карма: 388
   поощрить/наказать


PostPosted: Sat Apr 12, 2008 1:24 pm (спустя 20 дней 11 часов 2 минуты; написано за 12 минут 25 секунд)
   Post subject:
Reply with quote

Решил написать. Может кто ещё не нашёл способа совместного использования JsHTTPRequest и uploadprogress.

Закачать файл на сервер с помощью JsHTTPRequest не получится. Поэтому для отправки файла на сервер, без перезагрузки страницы, нужно воспользоваться скрытым ifram. А вот получать данные о ходе заливки можно с помощью JsHTTPRequest!

Вот HTML-код:

<iframe src = 'upl.php' name='upl' style='width:100%;height:100px;display:none;'></iframe>

<FORM method="POST" enctype="multipart/form-data" target='upl' action='upl.php' style='margin:0px;margin-top:2px;'>
<input type="hidden" name="UPLOAD_IDENTIFIER" id="UPLOAD_IDENTIFIER" value="upload_qwerty123"/>
<input type="file" name='file' id="Upload" style='width:429px;'>
<input type="button" value="Upload" id='UploadButton' onclick="javascript:startProgressBar();this.form.submit();">
</FORM>

Код функиции "startProgressBar()" приводить смысла не вижу. Вы её и сами напишите. Главное, что для получения данных о ходе заливки используется JsHTTPRequest.

ЗЫ: И ещё один момент, можно сказать оффтопик: под windows "php_uploadprogress.dll" скачанная с сайта pecl.php.net НЕ РАБОТАЕТ! Нужно возпользоваться библиотекой отсюда: www.emforge.org/wiki/AjaxBasedFileUploadForPHP Добрые люди исправили ошибку :) У меня всё работает под: winXP, php5.2.5, apache1.3.
Back to top
Максимушка
Guest





Карма: 388
   поощрить/наказать


PostPosted: Sat Nov 07, 2009 12:38 am (спустя 1 год 6 месяцев 24 дня 11 часов 13 минут)
   Post subject:
Reply with quote

Quote:
Главное, что для получения данных о ходе заливки используется JsHTTPRequest.
Об этом можно поподробней?.. а то я знаю как получать ответы JsHTTPRequestом на запрос, но это только в том случае если я им же делаю запрос, а тут ведь запрос делается
Quote:
this.form.submit();
как же с ним связать ответ на JsHTTPRequestом не представляю... этого я нигде не видел, поэтому прошу продемонстрировать.
Back to top
Guest






Карма: 388
   поощрить/наказать


PostPosted: Wed Jun 02, 2010 11:52 am (спустя 6 месяцев 25 дней 11 часов 13 минут; написано за 25 секунд)
   Post subject:
Reply with quote

У Zend Framework это выглядет так.
Code (any language): скопировать код в буфер обмена
<?php
/**
 * Zend Framework
 *
 * LICENSE
 *
 * This source file is subject to the new BSD license that is bundled
 * with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://framework.zend.com/license/new-bsd
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@zend.com so we can send you a copy immediately.
 *
 * @category   Zend
 * @package    Zend_ProgressBar
 * @subpackage Demos
 * @copyright  Copyright (c) 2005-2010 Zend Technologies USA Inc. (http://www.zend.com)
 * @license    http://framework.zend.com/license/new-bsd     New BSD License
 */

/**
 * This sample file demonstrates a simple use case of a jspull-driven progressbar
 */

if (isset($_GET['uploadId'])) {
    set_include_path(realpath(dirname(__FILE__) . '/../../../library')
                     . PATH_SEPARATOR . get_include_path());

    require_once 'Zend/ProgressBar.php';
    require_once 'Zend/ProgressBar/Adapter/JsPull.php';
    require_once 'Zend/Session/Namespace.php';

    $data          = uploadprogress_get_info($_GET['uploadId']);
    $bytesTotal    = ($data === null ? 0 : $data['bytes_total']);
    $bytesUploaded = ($data === null ? 0 : $data['bytes_uploaded']);

    $adapter     = new Zend_ProgressBar_Adapter_JsPull();
    $progressBar = new Zend_ProgressBar($adapter, 0, $bytesTotal, 'uploadProgress');

    if ($bytesTotal === $bytesUploaded) {
        $progressBar->finish();
    } else {
        $progressBar->update($bytesUploaded);
    }
}
?>
<html>
<head>
    <title>Zend_ProgressBar Upload Demo</title>
    <style type="text/css">
        iframe {
            position: absolute;
            left: -100px;
            top: -100px;

            width: 10px;
            height: 10px;
            overflow: hidden;
        }

        #progressbar {
            position: absolute;
            left: 10px;
            top: 50px;
        }

        .pg-progressbar {
            position: relative;

            width: 250px;
            height: 24px;
            overflow: hidden;

            border: 1px solid #c6c6c6;
        }

        .pg-progress {
            z-index: 150;

            position: absolute;
            left: 0;
            top: 0;

            width: 0;
            height: 24px;
            overflow: hidden;
        }

        .pg-progressstyle {
            height: 22px;

            border: 1px solid #748a9e;
            background-image: url('animation.gif');
        }

        .pg-text,
        .pg-invertedtext {
            position: absolute;
            left: 0;
            top: 4px;

            width: 250px;

            text-align: center;
            font-family: sans-serif;
            font-size: 12px;
        }

        .pg-invertedtext {
            color: #ffffff;
        }

        .pg-text {
            z-index: 100;
            color: #000000;
        }
    </style>
    <script type="text/javascript">
        function makeRequest(url)
        {
            var httpRequest;

            if (window.XMLHttpRequest) {
                httpRequest = new XMLHttpRequest();
                if (httpRequest.overrideMimeType) {
                    httpRequest.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) {
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }

            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }

            httpRequest.onreadystatechange = function() { evalProgress(httpRequest); };
            httpRequest.open('GET', url, true);
            httpRequest.send('');

        }

        function observeProgress()
        {
            setTimeout("getProgress()", 1500);
        }

        function getProgress()
        {
            makeRequest('Upload.php?uploadId=' + document.getElementById('uploadId').value);
        }

        function evalProgress(httpRequest)
        {
            try {
                if (httpRequest.readyState == 4) {
                    if (httpRequest.status == 200) {
                        eval('var data = ' + httpRequest.responseText);

                        if (data.finished) {
                            finish();
                        } else {
                            update(data);
                            setTimeout("getProgress()", 1000);
                        }
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            } catch(e) {
                alert('Caught Exception: ' + e.description);
            }
        }

        function update(data)
        {
            document.getElementById('pg-percent').style.width = data.percent + '%';

            document.getElementById('pg-text-1').innerHTML = data.timeRemaining + ' seconds remaining';
            document.getElementById('pg-text-2').innerHTML = data.timeRemaining + ' seconds remaining';
        }

        function finish()
        {
            document.getElementById('pg-percent').style.width = '100%';

            document.getElementById('pg-text-1').innerHTML = 'Upload done';
            document.getElementById('pg-text-2').innerHTML = 'Upload done';
        }
    </script>
</head>
<body>
    <form enctype="multipart/form-data" method="post" action="Upload.php" target="uploadTarget" onsubmit="observeProgress();">
        <input type="hidden" name="UPLOAD_IDENTIFIER" id="uploadId" value="<?php echo md5(uniqid(rand())); ?>" />
        <input type="file" name="file" />
        <input type="submit" value="Upload!" />
    </form>
    <iframe name="uploadTarget"></iframe>

    <div id="progressbar">
        <div class="pg-progressbar">
            <div class="pg-progress" id="pg-percent">
                <div class="pg-progressstyle"></div>
                <div class="pg-invertedtext" id="pg-text-1"></div>
            </div>
            <div class="pg-text" id="pg-text-2"></div>
        </div>
    </div>
    <div id="progressBar"><div id="progressDone"></div></div>
</body>
</html>
Back to top
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
Post a reply
Username
Subject
Господа спамеры и оптимизаторы!

Вы можете даже и не пытаться вставлять в текст поста ссылки - они все равно автоматически удаляются (вернее, тэги <a> заменяются на тэги <u>).

Но если не поверите и все же попытаетесь - как только увидите, что все безрезультатно, удалите свой пост, пожалуйста. Модераторы тоже люди, нехорошо, если они погрязнут в тоннах спама.
     

Disable BBCode in this post
Disable Smilies in this post
    HTML is OFF
BBCode is ON
Smilies are ON
You cannot post new topics in this forum. You can reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML